<template>
  <div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <div>
          <van-image width="80" height="80" round :src="userInfo.imageUrl" />
        </div>
      </van-grid-item>
      <van-grid-item>
        <van-cell :value="userInfo.displayName" :border="false" />
        <van-cell :value="userInfo.gender" :border="false" />
      </van-grid-item>
      <van-grid-item>
        <van-icon name="setting-o" size="20" @click="showPopup"/>
      </van-grid-item>
      <van-popup v-model="show" position="right" get-container="body" :style="{ height: '100%',width:'55%' }">
        <van-cell-group>
          <van-cell title="我的订单" icon="shopping-cart-o"/>
          <van-cell title="我的钱包" value="￥2.00" icon="browsing-history-o"/>
          <van-divider />
          <van-cell title="我的二维码"  icon="qr"/>
          <van-cell title="观看历史"  icon="browsing-history-o"/>
          <van-cell title="使用管理组手"  value="定时关闭" icon="award-o"/>
          <van-cell title="离线模式"  icon="down"/>
          <van-cell title="抖音创作者中心" icon="bulb-o"/>
          <van-divider />
          <van-cell title="小程序" icon="cluster-o"/>
          <van-cell title="抖音公益" icon="goods-collect-o"/>
          <van-cell title="DOU+上热门" icon="hot-o"/>
          <van-cell title="青少年守护中心" icon="flower-o"/>
          <van-cell title="我的客服" icon="service-o"/>
          <van-cell title="退出登录" @click="logout" icon="revoke"/>
        </van-cell-group>
      </van-popup>
    </van-grid>
    <van-empty :description="msg" />
  </div>
</template>

<script>
import { getUserInfo } from "@/api/wechat";
import store from "@/store";
export default {
  data() {
    return {
      msg: "个人页面",
      loading: true,
      userInfo: {},
      show:false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
      getUserInfo().then((res)=>{
        if (res.data.code==200){
          this.userInfo = res.data.data;
          if (this.userInfo.gender==0){
            this.userInfo.gender='未知';
          }else if (this.userInfo.gender==1){
            this.userInfo.gender='男';
          }else {
            this.userInfo.gender='女';
          }
        }
        }).catch(error=>{
      })
    },
    showPopup(){
      this.show = true;
    },
    /*退出*/
    logout(){
      store.dispatch('Logout',{}).then(res=>{
      });
      this.show = false;
    }
  }
}
</script>
